<style lang="scss">
#medicine{
   #echart{
       width:100%;
       height:100%;
       padding:10px 0;
       background:#fff;
       .echart-row{
            margin-bottom:10px;
            height:calc(50% - 10px);
            .echart-col{
                width:calc(50% - 20px);
                margin:0 10px;
                height:100%;
                box-shadow: 0px 0px 20px 0px rgba(236, 236, 236, 1);
                border: 1px solid rgba(236, 236, 236, 1);
                .echart-title{
                    border-bottom:1px solid rgba(236, 236, 236, 1);
                    height: 40px;
                    line-height:40px;
                    color:#666;
                    text-indent:2em;
                    font-size:14px;
                }
                .echart-content{
                    height:calc(100% - 41px);
                }
            }
       }
   }
}  
</style>
<template>
    <div id="echart">
        <el-row class="echart-row">
            <el-col class="echart-col">
                <p class="echart-title">药物种类</p>
                <div class="echart-content" id="echart1"></div>
            </el-col>
            <el-col class="echart-col">
                <p class="echart-title">药物完成情况</p>
                <div class="echart-content" id="echart2"></div>
            </el-col>
        </el-row>
        <el-row class="echart-row">
            <el-col class="echart-col">
                <p class="echart-title">药物种类</p>
                <div class="echart-content" id="echart3"></div>
            </el-col>
            <el-col class="echart-col">
                <p class="echart-title">总数量</p>
                <div class="echart-content" id="echart4"></div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
// echarts相关
let echarts = require('echarts/lib/echarts');
// 引入饼图组件
require('echarts/lib/chart/bar');
require('echarts/lib/chart/pie');
// 引入提示框和图例组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/legend');
import {medicine} from 'api/index.js';
var echart1,echart2,echart3,echart4;
export default {
    name: 'medicine',
    data(){
        return{
            echartData:[],
            echart1Name:["西药","中成药"],
            echart1Count:[{"name":"西药","value":"65"},{"name":"中成药","value":"35"}],
            echart2Name:["已完成","未完成"],
            echart2Count:[{"name":"已完成","value":"65"},{"name":"未完成","value":"35"}],
            echart3Name:["2D图","3D图","药物说明书"],
            echart3Is:["25","45","10"],
            echart3No:["55","25","50"],
            echart4Name:["药物基本信息","药物说明书","药物相互作用","临床试验"],
            echart4Count:[{"name":"药物基本信息","value":"33"},{"name":"药物说明书","value":"21"},{"name":"药物相互作用","value":"10"},{"name":"临床试验","value":"20"}],
        }
    },
    methods:{
        //获取各个图标数据
        getEchartData(){
            let obj = {};
            medicine.getStatistics(obj).then((data)=>{
                if(data.status == 200){
                   if(data.data && data.data.length > 0){
                        this.echartData = data.data;
                        this.creatEchartData();
                        this.initEchart();
                   }
                }else{
                    this.$message.error(data.msg);
                }
            }).catch(error => {
                
            });
        },
        //创建所需数据
        creatEchartData(){
            this.echart1Count = [];
            this.echart2Count = [];
            this.echart3Is = [];
            this.echart3No = [];
            this.echart4Count = [];
            for(var i=0; i<this.echartData.length; i++){
                if(this.echartData[i].name == "traditional_Chinese_medicine"){
                    let obj={
                        "name":"中成药",
                        "value":this.echartData[i].count
                    }
                    this.echart1Count.push(obj);
                }
                if(this.echartData[i].name == "western_Medicine"){
                    let obj={
                        "name":"西药",
                        "value":this.echartData[i].count
                    }
                    this.echart1Count.push(obj);
                }
                if(this.echartData[i].name == "drug"){
                    let obj={
                        "name":"已完成",
                        "value":this.echartData[i].count
                    }
                    let obj2={
                        "name":"未完成",
                        "value":Number(this.echartData[i].total)-Number(this.echartData[i].count)
                    }
                    let obj3={
                        "name":"药物基本信息",
                        "value":this.echartData[i].count
                    }
                    this.echart2Count.push(obj);
                    this.echart2Count.push(obj2);
                    this.echart4Count.push(obj3);
                }
                if(this.echartData[i].name == "tow"){
                    this.echart3Is.push(this.echartData[i].count);
                    this.echart3No.push(Number(this.echartData[i].total)-Number(this.echartData[i].count));
                }
                if(this.echartData[i].name == "there"){
                    this.echart3Is.push(this.echartData[i].count);
                    this.echart3No.push(Number(this.echartData[i].total)-Number(this.echartData[i].count));
                }
                if(this.echartData[i].name == "book"){
                    let obj={
                        "name":"药物说明书",
                        "value":this.echartData[i].count
                    }
                    this.echart3Is.push(this.echartData[i].count);
                    this.echart3No.push(Number(this.echartData[i].total)-Number(this.echartData[i].count));
                    this.echart4Count.push(obj);
                }
                if(this.echartData[i].name == "interaction"){
                    let obj={
                        "name":"药物相互作用",
                        "value":this.echartData[i].count
                    }
                    this.echart4Count.push(obj);
                }
                if(this.echartData[i].name == "experiment"){
                    let obj={
                        "name":"临床试验",
                        "value":this.echartData[i].count
                    }
                    this.echart4Count.push(obj);
                }
            }
        },
        //创建echart
        initEchart(){
            this.initEchart1();
            this.initEchart2();
            this.initEchart3();
            this.initEchart4();
        },
        //第一个图
        initEchart1(){
            echart1 = echarts.init(document.getElementById('echart1'));
            let option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    bottom:10,
                    data: this.echart1Name
                },
                series: [
                    {
                        name: '药物种类',
                        type: 'pie',
                        center: ['50%', '42%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                        //通常情况下：
                            normal: {
                                color: function(params) {
                                    var colorList = ['#4A89DC', '#F6BB42', '#967ADC', '#3BAFDA','#EC6F5A'];
                                    return colorList[params.dataIndex];
                                }
                            }
                        },
                        label: {
                            normal: {
                                show: false,
                            },
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: this.echart1Count
                    }
                ]
            };
            echart1.clear();
            echart1.setOption(option);
        },
        //第二个图
        initEchart2(){
            echart2 = echarts.init(document.getElementById('echart2'));
            let option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    bottom:10,
                    data: this.echart2Name
                },
                series: [
                    {
                        name: '药物种类',
                        type: 'pie',
                        center: ['50%', '42%'],
                        avoidLabelOverlap: false,
                        
                        label: {
                            normal: {
                                show: false,
                            },
                        },
                        itemStyle: {
                        //通常情况下：
                            normal: {
                                color: function(params) {
                                    var colorList = ['#4A89DC', '#F6BB42', '#967ADC', '#3BAFDA','#EC6F5A'];
                                    return colorList[params.dataIndex];
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: this.echart2Count
                    }
                ]
            };
            echart2.clear();
            echart2.setOption(option);
        },
        //第三个图
        initEchart3(){
            echart3 = echarts.init(document.getElementById('echart3'));
            let option = {
                color: ['#4A89DC','#3BAFDA','#F6BB42', '#967ADC','#EC6F5A'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data:["无","有"]
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: this.echart3Name,
                        splitLine: {show: false},
                        axisTick: {show: false},
                        axisLine: {show: false},
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitLine: {show: false},
                        axisTick: {show: false},
                        axisLine: {show: false},
                        axisLabel:{show:false}
                    }
                ],
                series: [
                    {
                        name: '无',
                        type: 'bar',
                        barWidth:"20",
                        data: this.echart3No
                    },
                    {
                        name: '有',
                        type: 'bar',
                        barWidth:"20",
                        data: this.echart3Is
                    }
                ]
            };
            echart3.clear();
            echart3.setOption(option);
        },
        //第四个图
        initEchart4(){
            echart4 = echarts.init(document.getElementById('echart4'));
            let option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c})"
                },
                legend: {
                    orient:"vertical",
                    top:20,
                    right:10,
                    data: this.echart4Name
                },
                series: [
                    {
                        name: '药物种类',
                        type: 'pie',
                        center: ['50%', '42%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                        //通常情况下：
                            normal: {
                                color: function(params) {
                                    var colorList = ['#4A89DC', '#F6BB42', '#967ADC', '#3BAFDA','#EC6F5A'];
                                    return colorList[params.dataIndex];
                                }
                            }
                        },
                        label: {
                            normal: {
                                show: false,
                            },
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: this.echart4Count
                    }
                ]
            };
            echart4.clear();
            echart4.setOption(option);
        },

    },
    mounted(){
        this.getEchartData();
        var _this=this;
        window.onresize=function(){
            echart1.resize();
            echart2.resize();
            echart3.resize();
            echart4.resize();
        };
    }
}
</script>


